<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @clear="clear"
      @handleQuery="getList(1)"
    />
    <div v-if="meta.indexOf('CoachManagementAdd') > -1" class="doumee_table_header">
      <el-button
        type="primary"
        @click="addCoach()"
      >新增</el-button>
    </div>
    <el-table
      ref="tableRef"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tablec"
    >
      <el-table-column
        align="center"
        label="教练名称"
        prop="teacherName"
        show-overflow-tooltip
        min-width="120"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="showTeacher(scope.row)">{{ scope.row.teacherName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="头像"
        width="120"
        prop="teacherImage"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 36px;"
            fit="contain"
            :src="scope.row.teacherImage"
            :preview-src-list="[scope.row.teacherImage]"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号" prop="phone" min-width="120" show-overflow-tooltip />
      <el-table-column
        align="center"
        label="等级"
        prop="levelName"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="授课类型"
        prop="courseType"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="约课规则"
        prop="courseRuleInfo"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="性别"
        prop="sex"
        min-width="80"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.sex == '1'">男</span>
          <span v-else-if="scope.row.sex == '2'">女</span>
          <span v-else>保密</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="排序码"
        prop="sortNum"
        min-width="80"
      />
      <el-table-column
        align="center"
        label="创建时间"
        prop="createTime"
        min-width="160"
      />
      <el-table-column label="在岗状态" min-width="80" align="center" fixed="right">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" @change="editStatus(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="60" align="center" fixed="right">
        <template slot-scope="scope">
          <span>{{ scope.row.isOnJob == '1' ? '在职' : '离职' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="120" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="meta.indexOf('CoachManagementAdd') > -1"
              v-preventReClick
              type="text"
              @click="addCoach(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="scope.row.isOnJob == '1' && meta.indexOf('TeacherRuleAddOrUpdate') > -1"
              v-preventReClick
              type="text"
              @click="rowRuleClick(scope.row)"
            >约课规则</el-button>
            <el-button
              v-if="scope.row.isOnJob != '1' && meta.indexOf('CoachManagementAdd') > -1"
              v-preventReClick
              class="secondColor"
              type="text"
              @click="rowClickDel(scope.row)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <el-drawer
      :title="form.teacherId ? '编辑教练' : '新增教练'"
      :visible.sync="showAddCoach"
      :before-close="addClose"
      size="800px"
    >
      <el-form ref="form" :model="form" label-suffix="：" :rules="rules" label-width="100px">
        <el-form-item label="头像" prop="teacherImage">
          <transition name="fade">
            <Cropper
              v-if="dialogCropperVisible"
              :option-img="optionImg"
              :fileinfo="fileinfo"
              use-type="TEACHER_IMG"
              :fixed-number="[32, 32]"
              @formSubmit="cropperSubmit"
              @formClose="cropperClose"
            />
          </transition>
          <div class="df_ac">
            <el-upload
              class="device-uploader"
              :action="uploadFileUrl"
              accept=".jpg,.png"
              :data="uploadData"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="addFileChange"
            >
              <i class="el-icon-plus uploader-icon" />
              <div
                v-show="form.teacherImage"
                class="file"
                :style="'background-image: url(' + form.teacherImage + ')'"
              >
                <div class="delete">
                  <i
                    class="el-icon-delete icon"
                    @click.stop="deleteDeviceConfigAddImage"
                  />
                </div>
              </div>
            </el-upload>
            <span class="placeholder9">建议图片尺寸360px * 360px</span>
          </div>
        </el-form-item>
        <el-form-item label="教练姓名" prop="teacherName">
          <el-input v-model="form.teacherName" class="w200" placeholder="请输入教练姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="form.phone"
            class="w200"
            placeholder="请输入手机号"
            @input="phoneChange"
          />
        </el-form-item>
        <el-form-item label="授课类型" prop="type">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="0">常规课</el-checkbox>
            <el-checkbox label="1">私教课</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="等级"
          :rules="{ required: form.type.indexOf('1') > -1 ? true : false, message: '请选择教练等级', trigger: 'change' }"
        >
          <el-select v-model="form.levelId" placeholder="请选择教练等级" class="w200">
            <el-option
              v-for="item in levelList"
              :key="item.id"
              :label="item.levelName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="form.sex" label="1">男</el-radio>
          <el-radio v-model="form.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item v-if="form.teacherId && form.teacherId != ''" label="在职状态" prop="isOnJob">
          <el-radio v-model="form.isOnJob" label="0">离职</el-radio>
          <el-radio v-model="form.isOnJob" label="1">在职</el-radio>
        </el-form-item>
        <el-form-item label="教练介绍" prop="info">
          <div class="secondColor">注：图片不支持复制粘贴，仅支持本地上传；</div>
          <quill-editor ref="myTextEditor" v-model="form.info" placeholder="请输入教练介绍" class="myQuillEditor" :options="quillOption" />
        </el-form-item>
        <el-form-item label="排序码">
          <el-input
            v-model="form.sortNum"
            class="w200"
            placeholder="请输入排序码"
          />
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick :loading="subLoading" type="primary" @click="confirmAddTeacher">确定</el-button>
          <el-button @click="cancelAddTeacher">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer
      ref="ykRulesRef"
      title="约课规则"
      :visible.sync="isShowYkRules"
      :before-close="ykCloseDrawer"
      size="1000px"
    >
      <div class="ykList">
        <div v-for="item,index in TeacherRule" :key="index" class="item">
          <span class="mr10"><span class="secondColor">*</span>约课规则</span>
          <el-select v-model="item.daysTemp" multiple class="w120 mr10" clearable placeholder="周几上课">
            <el-option
              v-for="op in weekDays"
              :key="op.value"
              :label="op.label"
              :value="op.value"
            />
          </el-select>
          <el-select v-model="item.courseId" class="w200 mr10" clearable placeholder="上课课程">
            <el-option
              v-for="op in pubCourseList"
              :key="op.courseId"
              :label="op.courseName"
              :value="op.courseId"
            />
          </el-select>
          <el-time-picker
            v-model="item.timeSel"
            is-range
            range-separator="至"
            class="mr10"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            value-format="HH:mm"
            format="HH:mm"
          />
          <span class="mr10 primaryColor pointer" @click="teacherRuleCopy(item)">复制</span>
          <span class="secondColor pointer" @click="teacherRuleDel(index)">删除</span>
        </div>
        <div style="text-align: center;">
          <el-button type="primary" class="add_btn mt20" @click="ykAdd">添加约课规则</el-button>
        </div>
        <div>
          <el-button :loading="ykSubLoading" type="primary" @click="subTeacherRule">确定</el-button>
          <el-button @click="isShowYkRules = false">取消</el-button>
        </div>
      </div>
    </el-drawer>

    <el-dialog
      title="教练详情"
      :visible.sync="showDetail"
      width="1000px"
    >
      <div class="detail_info">
        <div class="header df">
          <img class="img" :src="detailInfo.teacherImage" alt="">
          <div class="content">
            <div class="name_wrap">
              <span>{{ detailInfo.teacherName }}</span>
              <span class="fs12 ml10">{{ detailInfo.sex == '1' ? '男' : detailInfo.sex == '2' ? '女' : '保密' }}</span>
            </div>
            <div class="df mt20">
              <div class="flex1">手机号：{{ detailInfo.phone }}</div>
              <div class="flex1">状态：{{ detailInfo.isOnJob == '1' ? '在职' : '离职' }}</div>
              <div class="flex1">等级：{{ detailInfo.levelName }}</div>
              <div class="flex1">授课类型：{{ detailInfo.courseType }}</div>
            </div>
            <div class="des"><span v-html="detailInfo.info" /></div>
          </div>
        </div>
        <el-tabs v-model="detailInfoFlag" @tab-click="detailInfoTabsChange">
          <el-tab-pane label="约课规则" name="1">
            <div v-for="item in detailInfo.courseRuleInfo" :key="item" class="yk_rules">
              {{ item }}
            </div>
          </el-tab-pane>
          <el-tab-pane label="课时信息" name="2">
            <QueryForm
              v-model="detailFilters"
              :query-form-config="detailFormConfig"
              @clear="detailClear"
              @handleQuery="courseTimeList"
            >
              <el-button slot="btns" :loading="loadingExport" type="primary" @click="courseInfoEx">导出</el-button>
            </QueryForm>
            <el-table
              ref="detailTableRef"
              :data="courseTList"
              element-loading-text="Loading"
              border
              fit
              :header-row-class-name="'table-header'"
              class="doumee-element-table"
            >
              <el-table-column
                align="center"
                label="课程名称"
                prop="courseName"
                show-overflow-tooltip
                min-width="120"
              />
              <el-table-column
                align="center"
                label="上课时间"
                prop="classTime"
                show-overflow-tooltip
                min-width="200"
              />
              <el-table-column
                align="center"
                label="课程类型"
                show-overflow-tooltip
                min-width="80"
              >
                <template v-slot="scope">
                  <span>{{ scope.row.type == '0' ? '常规课' : '私教课' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="课时状态"
                show-overflow-tooltip
                min-width="80"
              >
                <template v-slot="scope">
                  <span>{{ scope.row.status == '0' ? '未上课' : '已上课' }}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="签到学员"
                prop="num"
                show-overflow-tooltip
                min-width="80"
              />
              <el-table-column
                align="center"
                label="未签到学员"
                prop="unNum"
                show-overflow-tooltip
                min-width="100"
              />
            </el-table>
            <Paginations
              :total="detailtotal"
              :page="detailPaination.page"
              @current-change="detailPageChange"
              @SizeChange="detailSizeChange"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDetail = false">取 消</el-button>
        <el-button type="primary" @click="showDetail = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  uploadFile,
  addTeacher,
  teacherList,
  closeTeacher,
  coatchStuList,
  teacherLevelListPost,
  getTeacherRule,
  updateTeacherRule,
  publishCourseList,
  courseTimeListByTeacher,
  courseInfoExport
} from '@/api'
import { parseTime } from '@/utils'
import Cropper from '@/components/cropper'
import store from '@/store'
import { queryFormConfig, detailFormConfig, weekDays } from './config'
import QueryForm from '@/components/QueryForm'
import { quillEditor } from 'vue-quill-editor'
import quillConfig from '@/api/sc.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    Cropper,
    QueryForm,
    quillEditor
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      queryFormConfig,
      detailFormConfig,
      subLoading: false,
      levelList: [],
      quillOption: quillConfig,

      isShowYkRules: false,
      TeacherRule: [],
      ykSubLoading: false,
      pubCourseList: [],
      ykForm: {},
      detailInfo: {},
      weekDays,

      uploadFileUrl: uploadFile,
      uploadData: {
        folder: 'TEACHER_IMG',
        type: ''
      },
      dialogCropperVisible: false,
      param: {},
      files: {},
      fileinfo: {},
      list: [],
      total: 0,
      filters: {},
      detailFilters: {},
      detailPaination: {
        page: 1,
        rows: 10
      },
      detailtotal: 0,
      courseTList: [],
      loadingExport: false,

      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false,
      showAddCoach: false,
      showDetail: false,
      detailInfoFlag: '1',
      venueId: sessionStorage.getItem('venueId'),
      form: {
        type: []
      },
      projectMessage: [],
      rules: {
        teacherImage: [
          { required: true, message: '请上传教练头像', trigger: 'blur' }
        ],
        teacherName: [
          { required: true, message: '请输入教练姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        isOnJob: [
          { required: true, message: '请选择在职状态', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个授课类型', trigger: 'change' }
        ],
        info: [
          { required: true, message: '请输入教练介绍', trigger: 'blur' }
        ]
      },
      // 教练详情
      coatchDetailForm: {
        teacherId: '',
        classTime: '',
        status: ''
      },
      coatchDetailpagination: {
        page: 1,
        rows: 10
      },
      classesTotal: 0,
      classStatus: [
        { id: '0', name: '待上课' },
        { id: '1', name: '已上课' }
      ],
      classList: []
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
    this.getCoachLevelList()
  },
  activated() {
    this.$refs.tableRef.doLayout()
  },
  mounted() {
    this.$refs.tableRef.doLayout()
  },
  methods: {
    subTeacherRule() {
      let count = 0
      const TeacherRule = [...this.TeacherRule]
      const temp = TeacherRule.map(item => {
        if (!item.timeSel || !item.daysTemp || !item.courseId || item.daysTemp.length === 0) {
          count++
          return
        }
        item.beginTime = item.timeSel[0]
        item.endTime = item.timeSel[1]
        item.days = item.daysTemp.join(',')
        return item
      })
      if (count > 0) {
        return this.$message.warning('所有规则必填')
      }
      this.ykSubLoading = true
      updateTeacherRule({
        param: {
          ruleData: temp,
          teacherId: this.detailInfo.teacherId
        }
      }).then(res => {
        this.ykSubLoading = false
        if (res.errorCode !== '000000') return
        this.$message.success('提交成功')
        this.getList()
        this.isShowYkRules = false
      }, () => {
        this.ykSubLoading = false
      })
    },
    ykAdd() {
      this.TeacherRule.push({
        courseId: '',
        daysTemp: ''
      })
    },
    courseTimeList() {
      courseTimeListByTeacher({
        param: { ...this.detailFilters, teacherId: this.detailInfo.teacherId },
        pagination: this.detailPaination
      }).then(res => {
        this.courseTList = res.record.paramList || []
        this.detailtotal = res.totalCount
      })
    },
    teacherRuleDel(i) {
      const TeacherRule = [...this.TeacherRule]
      TeacherRule.splice(i, 1)
      this.TeacherRule = TeacherRule
    },
    teacherRuleCopy(row) {
      const temp = JSON.parse(JSON.stringify(row))
      this.TeacherRule.push(temp)
    },
    getPublishCourseList() {
      publishCourseList({
        param: {
          courseType: '4',
          venueIds: [sessionStorage.getItem('venueId')]
        }
      }).then(res => {
        this.pubCourseList = res.recordList || []
      })
    },
    // 约课规则 获取
    getTeacherRules(teacherId) {
      getTeacherRule({ param: { teacherId }}).then(res => {
        this.TeacherRule = res.recordList.map(item => {
          if (item.days) {
            item.daysTemp = item.days.split(',')
          }
          if (item.beginTime && item.endTime) {
            const arr = [item.beginTime, item.endTime]
            item.timeSel = arr
          }
          return item
        })
      })
    },
    rowClickDel(row) {
      this.$confirm('此操作将删除该教练, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          closeTeacher({ param: { teacherId: row.teacherId, type: 1 }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              this.$message.success('删除成功')
              this.getList(1)
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    rowRuleClick(row) {
      this.detailInfo = { ...row }
      this.getPublishCourseList()
      this.getTeacherRules(row.teacherId)
      this.isShowYkRules = true
    },
    // 教练详情
    showTeacher(form) {
      form = JSON.stringify(form)
      form = JSON.parse(form)
      this.detailInfoFlag = '1'
      this.showDetail = true
      this.detailInfo = form
      this.coatchDetailForm.teacherId = form.teacherId
    },
    courseInfoEx() {
      this.loadingExport = true
      courseInfoExport({
        param: { ...this.detailFilters, teacherId: this.detailInfo.teacherId }
      }).then(res => {
        this.loadingExport = false
        if (res.errorCode !== '000000') return
        const a = document.createElement('a') // 创建一个a标签元素
        a.style.display = 'none' // 设置元素不可见
        a.href = res.record.showUrl // 设置下载地址
        document.body.appendChild(a) // 加入
        a.click() // 触发点击,下载
        document.body.removeChild(a) //
        this.$message.success('导出成功')
      }, () => {
        this.loadingExport = false
      })
    },
    detailInfoTabsChange(vla) {
      console.log(this.detailInfoFlag)
      if (this.detailInfoFlag === '2') {
        this.courseTimeList()
      }
    },
    ykCloseDrawer() {
      this.isShowYkRules = false
    },
    addCoach(row) {
      if (row && row.teacherId) {
        this.form = JSON.parse(JSON.stringify(row))
        if (this.form.type) {
          this.form.type = this.form.type.split(',')
        } else {
          this.form.type = []
        }
      } else {
        this.form = {
          type: []
        }
      }
      this.showAddCoach = true
    },
    confirmAddTeacher() {
      const param = { ...this.form }
      param.type = param.type.join(',')
      if (this.form.teacherId) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (param.type.indexOf('1') > -1) {
              if (!param.levelId) return this.$message.warning('私教课教练必须选择教练等级')
            }
            this.subLoading = true
            addTeacher({
              param
            })
              .then((res) => {
                if (res.errorCode !== '000000') return
                this.subLoading = false
                this.$message.success('编辑成功')
                this.showAddCoach = false
                this.getList(1)
              })
              .catch(() => {
                this.subLoading = false
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (param.type.indexOf('1') > -1) {
              if (!param.levelId) return this.$message.warning('私教课教练必须选择教练等级')
            }
            this.subLoading = true
            addTeacher({
              param
            })
              .then((res) => {
                if (res.errorCode !== '000000') return
                this.subLoading = false
                this.$message.success('添加成功')
                this.showAddCoach = false
                this.getList(1)
              })
              .catch(() => {
                this.subLoading = false
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    // 启用或禁用
    editStatus(row) {
      closeTeacher({
        param: {
          teacherId: row.teacherId,
          status: row.status,
          type: '0'
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.$message.success('状态更新成功')
            this.showAddCoach = false
            this.getList(1)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    detailClear() {
      this.detailFilters = {}
      this.detailPaination.page = 1
      this.courseTimeList()
    },
    detailSizeChange(value) {
      this.detailPaination.rows = value
      this.courseTimeList()
    },
    detailPageChange(val) {
      this.detailPaination.page = val
      this.courseTimeList()
    },
    phoneChange() {
      this.form.phone = this.form.phone.replace(/[^\d]/g, '')
      if (this.form.phone.length > 11) {
        this.form.phone = this.form.phone.substr(0, 11)
      }
      // 如果依赖element的表单校验，就到这里就OK了，如果单单用了el-input不用element的表单校验，那继续往下
      var reg = /^1[3456789]\d{9}$/
      if (this.form.phone.length >= 11 && !reg.test(this.form.phone)) {
        this.$message.warning('请输入正确的手机号码格式')
      }
    },
    // 上传图片成功
    uploadSuccess(res, file, fileList) {
      if (res.success) {
        this.$set(this.form, 'teacherImage', res.showUrl)
        this.$set(this.form, 'image', res.insertUrl)
      } else {
        this.$message.error(res.msg || '上传失败')
      }
      this.$refs.form.clearValidate()
    },
    // 上传图片，开始裁剪
    async addFileChange(file) {
      // 上传，拿到file文件
      this.files = file.raw
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.form, 'teacherImage', config.showUrl)
        this.$set(this.form, 'image', config.insertUrl)
        this.fileinfo = config
        // this.$refs.ruleForm.clearValidate();
        this.dialogCropperVisible = false
      } else {
        this.$message.error(config.msg || '上传失败')
        // this.$refs.ruleForm.clearValidate();
        this.dialogCropperVisible = false
      }
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false
    },
    // 删除已上传图片
    deleteDeviceConfigAddImage() {
      this.$set(this.form, 'teacherImage', '')
      this.$set(this.form, 'image', '')
    },
    getCoachLevelList() {
      teacherLevelListPost({ param: {}}).then(res => {
        this.levelList = res.recordList || []
        queryFormConfig.formItems[1].options = this.levelList.map(item => {
          item.value = item.id
          item.label = item.levelName
          return item
        })
      })
    },
    // 取消编辑
    cancelEditTeacher() {
      this.showDetail = false
    },
    // 取消添加
    cancelAddTeacher() {
      this.showAddCoach = false
    },
    // 关闭弹框
    addClose() {
      this.showAddCoach = false
      this.$refs.form.resetFields()
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      teacherList({
        pagination,
        param: {
          ...filters,
          venueId
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 查找
    clear() {
      this.filters = {}
      this.getList(1)
    },
    clearStuForm() {
      this.coatchDetailForm = { teacherId: this.coatchDetailForm.teacherId }
      this.getCoatchStuList(1)
    },
    // 教练详情
    getCoatchStuList() {
      // console.log(this.coatchDetailForm);
      coatchStuList({
        param: {
          ...this.coatchDetailForm
        },
        pagination: {
          ...this.coatchDetailpagination
        }
      })
        .then(res => {
          this.classesTotal = res.totalCount
          this.classList = res.record.paramList || []
        })
        .catch(() => {})
    },
    editCoach() {
      // :todo 保存
      this.confirmAddTeacher()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.ykList{
  width: 100%;
  .item{
    margin-bottom: 20px;
  }
  .add_btn{
    margin: 20px auto;
  }
}
.detail_info{
  .header{
    .img{
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }
    .content{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}

.edit-btn {
  display: flex;
  flex-direction: row-reverse;
}
.title-style {
  font-size: 22px;
  font-weight: 500;
  line-height: 36px;
  color: #000;
  margin-bottom: 20px;
}
</style>
